#!/usr/bin/env node
const webpack = require('webpack');
const { merge } = require('lodash');
const config = require('../config/dev');
const { resolveApp } = require('../utils');
const path = require('path');
const compiler = webpack(config);
const DevServer = require('webpack-dev-server');

const userConfig = require(resolveApp('magic.config.js'));

const server = new DevServer(
  merge(
    {
      open: true,
      hot: false,
      liveReload: true,
      port: process.env.PORT || 9000,
      compress: false, // 配置是否启用 gzip 压缩。boolean 为类型，默认为 false。
      host: 'localhost',
      // errors和warnings也不会被写到console中。
      client: {
        logging: 'error',
        overlay: {
          // 在编译过程中有任何错误，可以显示在网页上,在浏览器上全屏显示编译的errors或warnings。默认是关闭的
          warnings: false,
          errors: true,
        },
        progress: true,
      },
      // headers: {
      //   // 向所有的请求添加headers
      //   'X-Custom-Foo': 'bar',
      // },
      historyApiFallback: true, // 当使用html5 history api,将会在响应404时返回index.html。
      // https: true, // 默认情况下dev-server使用http协议，通过配置可以支持https
      // https: {
      //    key: fs.readFileSync("/path/to/server.key"),
      //    cert: fs.readFileSync("/path/to/server.crt"),
      //    ca: fs.readFileSync("/path/to/ca.pem"),
      // },
      open: false, // 第一次构建是否自动用浏览器打开网页，默认是true
      hot: true, // 开启热更新HMR，只能跟新css。js和图片需要手动更新
      proxy: {
        '/api': {
          target: 'https://api.github.com', // 代理地址
          pathRewrite: {
            '^/api': '',
          },
          // 默认代理服务器，会以我们实际在浏览器请求的主机名【localhost:8080】，作为代理服务器的主机名，
          // 然后代理服务器会带上这个主机名，去请求github，然而 github是不认识 【localhost:8080】
          //  changeOrigin: true 就是以实际代理请求发生过程中的主机名去请求，如：代理服务器的主机名
          changeOrigin: true,
        },
        ...userConfig.proxy,
      },
    },
    {}
  ),
  compiler
);

(async () => {
  await server.start();
})();
